<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://www.ld.com/shield/tags" prefix="shield"%>
<%@ page trimDirectiveWhitespaces="true" %>
<fmt:setLocale value="zh_CN"/>
<shield:permssion type="button">
<span class="tips">本页面展示一些比较优秀的技术栈、理论知识及中间件等，便于团队内进行参考及学习，及时充电！</span>
<div class="tagcloud">
<c:forEach var="model" items="${list }" varStatus="var">
	<!-- qtips提示，data-title设置标题【非必需】，data-cont设置内容【必需】，data-qtips-class设置样式【非必需】，data-qtips-class=yellow表示取内置的黄色样式【黄色、有阴影、圆角】，也可以写完整的样式qtip-yellow qtip-shadow qtip-rounded -->
    <c:if test="${not empty model.href }">
    <a class="tag qtips" data-title="${model.name }" data-cont="${model.tags }<br>链接：${model.href }<br>描述：<pre>${model.description }</pre>" target="_blank"  href="${model.href }">${model.name }</a>
    </c:if>
    <c:if test="${empty model.href }">
    <a class="tag qtips" data-title="${model.name }" data-cont="${model.tags }" >${model.name }</a>
    </c:if>
</c:forEach>
</div>
</shield:permssion>
<link type="text/css" rel="stylesheet" href="${ctxPath }/css/oa/tagcloud.css"/>
<script type="text/javascript" src="${ctxPath }/js/oa/tagcloud/tagcloud.js"></script>
<!-- svg3dtagcloud参考 https://blog.csdn.net/y_hai_yang/article/details/78643241 -->
<%-- <script type="text/javascript" src="${ctxPath }/js/lib/tagcloud/jquery.svg3dtagcloud.js"></script> --%>
<script type="text/javascript">
tagcloud({
    selector: ".tagcloud",  //元素选择器
    fontsize: 16,       //基本字体大小, 单位px
    radius: 150,         //滚动半径, 单位px
    mspeed: "normal",   //滚动最大速度, 取值: slow, normal(默认), fast
    ispeed: "normal",   //滚动初速度, 取值: slow, normal(默认), fast
    direction: 135,     //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
    keep: false          //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
});

var colors = new Array("Red", "blue", "gray");
$(".tagcloud .tag").each(function(i) {
	var colorIndex = Math.ceil(Math.random()*3)-1;
	$(this).css("color", getRandomColor());
});
</script>
